<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    vue.js框架的引入-->
    <!--    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>-->
    <script src="vue.js"></script>
</head>
<body>
<!--div的dom元素-->
<div id="app">
    <!--    vue模版语法-->
    {{ message }}

    <p>{{message}}</p>
</div>
</body>
<script>
    // 组合api
    // 对象解构
    // createApp：创建应用 App
    // ref： 响应式
    const {createApp, ref} = Vue

    const app = createApp({
        // 在该函数中可以自动声明数据和方法 最后return返回即可
        // 返回的对象可以在html中进行使用
        setup() {
            // 定义一个数据 ref会将数据编程响应式
            // vue3的数据默认不是响应式（一个改变另外一个随着改变）
            const message = ref('lisi')
            return {
                // 将数据暴露出来
                message
            }
        }
        // 将app对象 挂载到css选择器 相当于把想要显示的内容放到div中
    })
    app.mount('#app')
</script>
</html>